[ENG-2641] Fix radio button positioning in webkit #1157
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
brianjgeiger approved these changes Mar 10, 2021
adlius changed the title 
futa-ikeda approved these changes Mar 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
Purpose
There is some weird interaction between the
text-align: centeron the parentfieldsetelement and theposition: absoluteof the childinputelement in Webkit. This could be a potential Webkit bug and I have tried to narrow down to a very specific scenario, as shown in this jsfiddle.In the jsfiddle demo, it seems that the bug appears when the parent block element with
text-align: centerhas both child block elements and child inline elements. In this scenario, the child inline elements withposition: absolutewould not be centered correctly.This fix bypass this potential bug by wrapping
<label>and<input>in a div, because in this case theposition: absoluteof the<input>would be relative to the wrapping<div>instead of to the<fieldset>.Tested on WebkitGTK, Chrome and Firefox and it all works. Haven't tried Edge yet but I don't expect it to be any different from Chrome because it it based on Chromium.
Possible related bug report for webkit: https://bugs.webkit.org/show_bug.cgi?id=31241
Summary of Changes
Side Effects
QA Notes