Closed Bug 1137730 Opened 7 years ago Closed 7 years ago

JQuery selector for visible SVGs behaves strange in FF

Categories

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

36 Branch
x86
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: areichelt, Unassigned)

Details

Attachments

(1 file, 1 obsolete file)

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: 7 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.