Last modified: 2014-11-20 13:20:05 UTC
User:Tacsipacsi at the Hungarian Wikipedia reports issues with "the new buttons" and provides the following log: [2014.11.15. 14:41:15] CSS - https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/index.html HTML style attribute Invalid value for property: zoom Line 1: display:inline;margin:0;border:0;padding:1px;width:1px;zoom:1 -------------------------------------------------------------^ [2014.11.15. 14:41:15] CSS - https://tools.wmflabs.org/oojs-ui/oojs-ui/dist/oojs-ui-mediawiki.svg.css Linked-in stylesheet Invalid value for property: -webkit-transform Line 957: -webkit-transform: translateZ(0px); -------------------------------------^ [2014.11.15. 14:41:15] CSS - https://tools.wmflabs.org/oojs-ui/oojs-ui/dist/oojs-ui-mediawiki.svg.css Linked-in stylesheet Invalid value for property: -o-transform Line 960: -o-transform: translateZ(0px); --------------------------------^ [2014.11.15. 14:41:15] CSS - https://tools.wmflabs.org/oojs-ui/oojs-ui/dist/oojs-ui-mediawiki.svg.css Linked-in stylesheet Invalid value for property: transform Line 961: transform: translateZ(0px); -----------------------------^ [2014.11.15. 14:41:15] CSS - https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/styles/demo.css Linked-in stylesheet Declaration syntax error Line 197: width: calc(100% - 40px); --------------------------^
The problem is that there's no visual difference between the checked and unchecked status of the buttons. I tested and I can use it, but I don't know whether it's in checked or unchecked state. It generated lots of "warnings" beside the "errors" in the previous comment what I didn't attach to the error report, say if you need it.
Assuming this is about Opera 12, then this is a Opera bug where SVG background-image sometimes disappears in presence of border-radius and the right phase of the moon. If you restart your browser, you'll probably be able to see the checkmark (for a while). The solution is to stop serving SVG to Opera 12, like Thiemo has figured out and did it for this new checkbox style back when it was part of BetaFeatures (2b8f46c6dfbbe9a66029820f2b524b3aaf8fcddd). That is, however, currently impossible with the current build and "shipping" process of OOUI. It might also be possible to come up with a magic combination of styles that makes it all work correctly. I couldn't come up with any, but I didn't spend too much time poking at this.
(In reply to Bartosz Dziewoński from comment #2) > The solution is to stop serving SVG to Opera 12, like Thiemo has figured out > and did it for this new checkbox style back when it was part of BetaFeatures Note that this doesn't even cause the rendering to worsen – while Opera 12 has excellent support for the SVG format itself, it has rather lousy support for SVGs as background-images – if you zoom in, you can see the pixels appear just as if it was a PNG image. (I never tested this on a high DPI screen, but I would expect the effect to be the same.)
The issue is caused by the combination of the SVG background and the border-radius. One solution can be seen in 2b8f46c6. An other solution is to remove the CSS border completely and draw the border in the SVG instead. I once tested this and it works fine in all browsers including Opera 12. Personally I'm oscillating between two extremes: * Don't reinvent the wheel. A checkbox is a checkbox. All CSS hacks (opacity: 0, empty clip regions) to force individual styles on otherwise native form elements are horrible and should have never been invented. * Opera 12 is dead. It's performance on sites like Twitter is horrible. People should just stop using it. I did.
