Bartosz Dziewoński has uploaded a new change for review. https://gerrit.wikimedia.org/r/191633
Change subject: Work around Safari 8 misrendering checkboxes in SVG-only distribution ...................................................................... Work around Safari 8 misrendering checkboxes in SVG-only distribution Bug: T89309 Change-Id: Idc81a96986fa6959d1bbcea5839b3639e1c68b47 --- M src/themes/mediawiki/common.less M src/themes/mediawiki/widgets.less 2 files changed, 19 insertions(+), 1 deletion(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/33/191633/1 diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less index b2171b2..04de134 100644 --- a/src/themes/mediawiki/common.less +++ b/src/themes/mediawiki/common.less @@ -49,4 +49,18 @@ // Theme mixins -// (add mixins here) +// Workaround for Safari 8 bug. Combining a selector like `input[type="checkbox"]:checked + span` +// with transition on background-size, background-color, and a single background-image using SVG +// causes the selector to sometimes not be applied. (T89309) +// +// * Syntax mimics the core mixin .oo-ui-background-image-svg(). +// * No-op in distributions other than 'vector'. +// * Using -webkit- prefix to limit this stupidity from impacting other browsers. Alas, some +// non-Safari ones also parse the -webkit- prefix (Chrome, Opera). +// * We take the payload size hit of the unnecessary /* @embed */ hint across the board. It should +// be mostly mitigated by using gzip compression. +// * Upstream bug report: https://bugs.webkit.org/show_bug.cgi?id=141789 +.oo-ui-background-image-safari( @url-without-extension ) when ( @oo-ui-distribution = vector ) { + @svg: '@{url-without-extension}.svg'; + background-image: -webkit-linear-gradient(transparent, transparent), e('/* @embed */') url(@svg); +} diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index 8dec530..b78a866 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -213,6 +213,7 @@ background-color: white; border: 1px solid @input-border-color; .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check-constructive'); + .oo-ui-background-image-safari('@{oo-ui-default-image-path}/icons/check-constructive'); background-repeat: no-repeat; background-position: center center; background-origin: border-box; @@ -245,6 +246,7 @@ &:disabled:checked + span::before { .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check-invert'); + .oo-ui-background-image-safari('@{oo-ui-default-image-path}/icons/check-invert'); } } } @@ -326,6 +328,7 @@ background: white; border: 1px solid @input-border-color; .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/circle-constructive'); + .oo-ui-background-image-safari('@{oo-ui-default-image-path}/icons/circle-constructive'); background-repeat: no-repeat; background-position: center center; background-origin: border-box; @@ -358,6 +361,7 @@ &:disabled:checked + span::before { .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/circle-invert'); + .oo-ui-background-image-safari('@{oo-ui-default-image-path}/icons/circle-invert'); } } } -- To view, visit https://gerrit.wikimedia.org/r/191633 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Idc81a96986fa6959d1bbcea5839b3639e1c68b47 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Bartosz Dziewoński <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
