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)

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