馃枍 [Story interactive] Adapt slider styles to work on Firefox #35432
Conversation
|
Hey @gmajoulet! These files were changed: |
| var(--interactive-accent-color) var(--percentage-corrected) | ||
| ) !important; | ||
| opacity: 0.3 !important; | ||
| z-index: 0 !important; | ||
| } | ||
|
|
||
| .i-amphtml-story-interactive-slider-input::-webkit-slider-thumb { |
There was a problem hiding this comment.
Could the .i-amphtml-story-interactive-slider-input::-moz-range-thumb selector be added to this ruleset with the addition of border: none !important;?
There was a problem hiding this comment.
There's sth about the selector that breaks when we specify the two rules in the same ruleset like a, b {}. I think because Chrome doesn't know about the Firefox prefixes, it invalidates the ruleset. That's why we need 2 separate rulesets here.
More info at https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
| z-index: 2 !important; | ||
| } | ||
|
|
||
| .i-amphtml-story-interactive-mid-selection .i-amphtml-story-interactive-slider-input::-moz-range-thumb { |
There was a problem hiding this comment.
Same comment as above, maybe this selector can be added to the .i-amphtml-story-interactive-mid-selection .i-amphtml-story-interactive-slider-input::-webkit-slider-thumb ruleset.
|
@processprocess does not work, since combining the rules will make both browsers fail to parse the selector. |
That's so crazy! Thanks for making the demo and explaining. |
Firefox renderer doesn't follow certain things that Chrome does:
z-indexfor thumbs follow the input element's value.Demo: https://stories-demos-matias.web.app/examples/amp-story/interactive_slider.html