Closed Bug 1137730 Opened 10 years ago Closed 10 years ago

JQuery selector for visible SVGs behaves strange in FF

Categories

(Core :: DOM: CSS Object Model, defect)

Product:
Core
Component:
DOM: CSS Object Model
Version:
36 Branch
Platform:
x86
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: areichelt, Unassigned)

Details

Attachments

(1 file, 1 obsolete file)

Default.html
15.94 KB, text/html
Details
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.74 Safari/537.36 Steps to reproduce: The following jQuery selector behaves differently in Firefox and Chrome: var elem = $('.Zeichnungscontainer svg:visible')[0]; I initially thought that this was a DevExpress bug, but their developers told me that it must be a Firefox bug instead. Please see my error description in the DevExpress forum for better understanding: https://www.devexpress.com/support/center/Question/Details/T204670
Please attach a simple html testcase illustrating the issue (using the add an attachment button above). I read the support centre article but didn't really follow it. If you're going to add more than one file please don't zip them, just add multiple attachments.
Attached file Default.html —
Please keep in mind to add the jQuery 2.1.3 reference!
Attached file Default.html (obsolete) —
Attachment #8571223 - Attachment is obsolete: true
Comment on attachment 8571255 [details] Default.html ><!DOCTYPE html> > ><html xmlns="http://www.w3.org/1999/xhtml"> ><head runat="server"> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Test2</title> > <script> > function HandleActiveTabChanged() { > var elem=$('.Zeichnungscontainer svg:visible')[0]; > if(!(elem===undefined||elem.hasAttribute('viewBox'))) { > var rect=elem.getBBox(); > elem.setAttribute('viewBox',rect.x+' '+rect.y+' '+(rect.width+2)+' '+(rect.height+2)); > } > } > </script> > <style> > .Zeichnungscontainer > { > width: 66.666%; > height: 800px; > } > > .Prüfcontainer > { > width: 33.333%; > height: 800px; > background-color: grey; > float: right; > max-height: 100%; > overflow: auto; > } > > .left-navigation > { > width: 85px; > height: 100%; > background-color: grey; > float: left; > } > </style> > <script src="https://code.jquery.com/jquery-2.1.3.js"></script> ></head> ><body> > <form id="form1" runat="server"> > <input type="button" onclick="HandleActiveTabChanged();" value="Click me and resize the window in FF" /> > > <div class="left-navigation"> > </div> > > <div style="display: table; width: 100%; height: 100%;"> > <div class="Prüfcontainer"> > </div> > <div class="Zeichnungscontainer"> > <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="100%" height="100%" id="ZeichnungPos1" preserveAspectRatio="xMinYMin meet"> > <metadata id="metadata130"> > <rdf:rdf> > <cc:work rdf:about=""> > <dc:format>image/svg+xml</dc:format> > <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type> > </cc:work> > </rdf:rdf> > </metadata> > <defs id="defs4"></defs> > <g id="g6"> > <path d="m 230.14818,203.95055 0,332.12346 977.91472,0 0,-332.12346 -977.91472,0 z" inkscape:connector-curvature="0" id="path8" style="fill: #ffffb0; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 230.14818,536.07401 0,-332.12346 977.91472,0 0,332.12346 -977.91472,0" inkscape:connector-curvature="0" id="path10" style="fill: none; stroke: #000000; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,536.07401 0,-332.12346" inkscape:connector-curvature="0" id="path12" style="fill: none; stroke: #00ff00; stroke-width: 2.50246072px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 1208.0629,536.07401 -977.91472,0" inkscape:connector-curvature="0" id="path14" style="fill: none; stroke: #00ff00; stroke-width: 2.50246072px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 465.45769,484.77356 c 0,2.34606 1.87685,4.2229 4.22291,4.2229 l 0,0 284.4985,0 0,0 c 2.26785,0 4.1447,-1.87684 4.1447,-4.2229 0,0 0,0 0,0 l 0,0 0,-247.82181 0,0 c 0,-2.34606 -1.87685,-4.2229 -4.1447,-4.2229 l 0,0 -284.4985,0 0,0 c -2.34606,0 -4.22291,1.87684 -4.22291,4.2229 l 0,247.82181" inkscape:connector-curvature="0" id="path16" style="fill: #82c8ff; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 465.45769,484.77356 c 0,2.34606 1.87685,4.2229 4.22291,4.2229 l 0,0 284.4985,0 0,0 c 2.26785,0 4.1447,-1.87684 4.1447,-4.2229 0,0 0,0 0,0 l 0,0 0,-247.82181 0,0 c 0,-2.34606 -1.87685,-4.2229 -4.1447,-4.2229 l 0,0 -284.4985,0 0,0 c -2.34606,0 -4.22291,1.87684 -4.22291,4.2229 l 0,247.82181" inkscape:connector-curvature="0" id="path18" style="fill: none; stroke: #000000; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 465.45769,484.77356 c 0,2.34606 1.87685,4.2229 4.22291,4.2229 l 0,0 284.4985,0 0,0 c 2.26785,0 4.1447,-1.87684 4.1447,-4.2229 0,0 0,0 0,0 l 0,0 0,-247.82181 0,0 c 0,-2.34606 -1.87685,-4.2229 -4.1447,-4.2229 l 0,0 -284.4985,0 0,0 c -2.34606,0 -4.22291,1.87684 -4.22291,4.2229 l 0,247.82181" inkscape:connector-curvature="0" id="path20" style="fill: none; stroke: #00ff00; stroke-width: 2.50246072px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 245.86677,478.51741 0,41.83802 62.71792,0 0,-41.83802 -62.71792,0 z" inkscape:connector-curvature="0" id="path22" style="fill: #ffffef; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 245.86677,478.51741 62.71792,0 0,41.83802 -62.71792,0 0,-41.83802" inkscape:connector-curvature="0" id="path24" style="fill: none; stroke: #000000; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <text x="213.96039" y="510.50198" id="text26" xml:space="preserve" style="font-size: 26.27583694px; font-style: normal; font-weight: normal; text-align: start; text-anchor: start; fill: #000000; font-family: Arial">3685647-1</text> > <path d="m 60.215461,536.07401 26.119434,0" inkscape:connector-curvature="0" id="path28" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 60.215461,203.95055 26.119434,0" inkscape:connector-curvature="0" id="path30" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 73.275178,536.07401 0,-332.12346" inkscape:connector-curvature="0" id="path32" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 73.275178,536.07401 -3.910095,-13.13792 7.82019,0 -3.910095,13.13792 z" inkscape:connector-curvature="0" id="path34" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 73.275178,536.07401 -3.910095,-13.13792 7.82019,0 -3.910095,13.13792" inkscape:connector-curvature="0" id="path36" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 73.275178,203.95055 -3.910095,13.13792 7.82019,0 -3.910095,-13.13792 z" inkscape:connector-curvature="0" id="path38" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 73.275178,203.95055 -3.910095,13.13792 7.82019,0 -3.910095,-13.13792" inkscape:connector-curvature="0" id="path40" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,112.45433 0,26.19763" inkscape:connector-curvature="0" id="path52" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 611.92985,112.45433 0,26.19763" inkscape:connector-curvature="0" id="path54" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,125.51405 381.78167,0" inkscape:connector-curvature="0" id="path56" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,125.51405 13.05972,-3.9101 0,7.89839 -13.05972,-3.98829 z" inkscape:connector-curvature="0" id="path58" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 230.14818,125.51405 13.05972,-3.9101 0,7.89839 -13.05972,-3.98829" inkscape:connector-curvature="0" id="path60" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 611.92985,125.51405 -13.05972,-3.9101 0,7.89839 13.05972,-3.98829 z" inkscape:connector-curvature="0" id="path62" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 611.92985,125.51405 -13.05972,-3.9101 0,7.89839 13.05972,-3.98829" inkscape:connector-curvature="0" id="path64" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <text x="395.38879" y="121.36934" id="text66" xml:space="preserve" style="font-size: 26.27583694px; font-style: normal; font-weight: normal; text-align: start; text-anchor: start; fill: #000000; font-family: Arial"> 730 </text> > <path d="m 138.65196,360.82355 26.11944,0" inkscape:connector-curvature="0" id="path68" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 138.65196,203.95055 26.11944,0" inkscape:connector-curvature="0" id="path70" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 151.71168,360.82355 0,-156.873" inkscape:connector-curvature="0" id="path72" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 151.71168,360.82355 -3.91009,-13.05971 7.82019,0 -3.9101,13.05971 z" inkscape:connector-curvature="0" id="path74" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 151.71168,360.82355 -3.91009,-13.05971 7.82019,0 -3.9101,13.05971" inkscape:connector-curvature="0" id="path76" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 151.71168,203.95055 -3.91009,13.13792 7.82019,0 -3.9101,-13.13792 z" inkscape:connector-curvature="0" id="path78" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 151.71168,203.95055 -3.91009,13.13792 7.82019,0 -3.9101,-13.13792" inkscape:connector-curvature="0" id="path80" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,34.017825 0,26.119434" inkscape:connector-curvature="0" id="path92" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 1208.0629,34.017825 0,26.119434" inkscape:connector-curvature="0" id="path94" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,47.077542 977.91472,0" inkscape:connector-curvature="0" id="path96" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 230.14818,47.077542 13.05972,-3.910095 0,7.82019 -13.05972,-3.910095 z" inkscape:connector-curvature="0" id="path98" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 230.14818,47.077542 13.05972,-3.910095 0,7.82019 -13.05972,-3.910095" inkscape:connector-curvature="0" id="path100" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 1208.0629,47.077542 -13.0597,-3.910095 0,7.82019 13.0597,-3.910095 z" inkscape:connector-curvature="0" id="path102" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 1208.0629,47.077542 -13.0597,-3.910095 0,7.82019 13.0597,-3.910095" inkscape:connector-curvature="0" id="path104" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <text x="685.67426" y="43.793064" id="text106" xml:space="preserve" style="font-size: 26.27583694px; font-style: normal; font-weight: normal; text-align: start; text-anchor: start; fill: #000000; font-family: Arial"> 1870 </text> > <path d="m 598.87013,536.07401 26.11943,0" inkscape:connector-curvature="0" id="path108" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 598.87013,488.99646 26.11943,0" inkscape:connector-curvature="0" id="path110" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 611.92985,536.07401 -3.9101,13.05971 7.82019,0 -3.91009,-13.05971 z" inkscape:connector-curvature="0" id="path112" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 611.92985,536.07401 -3.9101,13.05971 7.82019,0 -3.91009,-13.05971" inkscape:connector-curvature="0" id="path114" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <path d="m 611.92985,488.99646 -3.9101,-13.05971 7.82019,0 -3.91009,13.05971 z" inkscape:connector-curvature="0" id="path116" style="fill: #000000; fill-opacity: 1; fill-rule: evenodd; stroke: none"></path> > <path d="m 611.92985,488.99646 -3.9101,-13.05971 7.82019,0 -3.91009,13.05971" inkscape:connector-curvature="0" id="path118" style="fill: none; stroke: #646464; stroke-width: 0.0782019px; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: 1; stroke-dasharray: none"></path> > <rect x="45.044292059999989" y="342.83713" width="26.27583694" height="53.802880000000016" onclick="ZeichnungEingabefeld(this)" xmlns=""></rect> > <rect x="122.62057306" y="255.25099" width="26.27583694" height="53.802900000000022" onclick="ZeichnungEingabefeld(this)" xmlns=""></rect> > <rect x="594.33439306" y="492.98477" width="26.27583694" height="38.788119999999935" onclick="ZeichnungEingabefeld(this)" xmlns=""></rect> > </g> > </svg> > </div> > </div> > > </form> ></body> ></html>
Sorry. This went wrong. You have to change it to https, otherwise browsers will block the script.
So there's no such thing as a :visible CSS pseudo selector it's a non-standard jquery thing. jquery implements it like this: In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0. However according to the CSSOM specification offsetHeight is html only http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
Attachment #8571255 - Attachment is obsolete: true
Attachment #8571223 - Attachment is obsolete: false
(In reply to Robert Longson from comment #6) > So there's no such thing as a :visible CSS pseudo selector it's a > non-standard jquery thing. jquery implements it like this: > > In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or > offsetHeight is greater than 0. > > However according to the CSSOM specification offsetHeight is html only > http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface I don't really understand. Why does it work in Google Chrome then? There must be a bug in either of the browsers.
Chrome is buggy, it does not implement the CSSOM specification as written.
Component: JavaScript: Standard Library → DOM: CSS Object Model
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: