Attachment 361624 Details for Bug 194342 – Standalone testcase

Standalone testcase

index.html (text/html), 8.35 KB, created by Simon Fraser (smfr) on 2019-02-09 22:59:25 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-02-09 22:59:25 PST

Size: 8.35 KB

patch

obsolete

><!DOCTYPE html>
><html lang="en">
>	<head>
>		<meta charset="utf-8">
>	</head>
>	
>	<style>
>		.MuiModal-root-15 {
>			top: 0;
>			left: 0;
>			right: 0;
>			bottom: 0;
>			z-index: 1300;
>			position: fixed;
>		}
>		
>		.MuiDialog-scrollPaper-2 {
>			display: flex;
>			align-items: center;
>			justify-content: center;
>		}
>		
>		.MuiDialog-container-4 {
>			height: 100%;
>			outline: none;
>		}
>		
>		.MuiDialog-paperScrollPaper-6 {
>			flex: 0 1 auto;
>			max-height: calc(100% - 96px);
>		}
>		
>		.MuiDialog-paperScrollPaper-6 {
>		flex: 0 1 auto;
>		max-height: calc(100% - 96px);
>		}
>		.MuiDialog-paper-5 {
>			margin: 48px;
>			display: flex;
>			position: relative;
>			overflow-y: auto;
>			flex-direction: column;
>		}
>		
>		.MuiPaper-elevation24-45 {
>			box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
>		}
>		
>		.MuiPaper-rounded-20 {
>			border-radius: 4px;
>		}
>		
>		.MuiPaper-root-19 {
>			background-color: #fff;
>		}
>		
>		.MuiBackdrop-root-17 {
>			top: 0;
>			left: 0;
>			right: 0;
>			bottom: 0;
>			z-index: -1;
>			position: fixed;
>			touch-action: none;
>			background-color: rgba(0, 0, 0, 0.5);
>			-webkit-tap-highlight-color: transparent;
>		}
>		
>		.MuiDialogContent-root-46 {
>			flex: 1 1 auto;
>			padding: 0 24px 24px;
>			overflow-y: auto;
>			-webkit-overflow-scrolling: touch;
>		}
>		
>		.MuiDialogContent-root-46:first-child {
>			padding-top: 24px;
>		}
>		.MuiFormControl-root-47 {
>			margin: 0;
>			border: 0;
>			display: inline-flex;
>			padding: 0;
>			position: relative;
>			min-width: 0;
>			flex-direction: column;
>			vertical-align: top;
>		}
>		
>		.MuiFormControl-fullWidth-50 {
>			width: 100%;
>		}
>		
>		.MuiInputBase-root-64 {
>			color: rgba(0, 0, 0, 0.87);
>			cursor: text;
>			display: inline-flex;
>			font-size: 1rem;
>			font-family: "Roboto", "Helvetica", "Arial", sans-serif;
>			line-height: 1.1875em;
>			align-items: center;
>		}
>		
>		.MuiInputBase-fullWidth-73 {
>			width: 100%;
>		}
>		
>		.MuiInput-root-51 {
>			position: relative;
>		}
>		.MuiInputBase-input-74 {
>			font: inherit;
>			color: currentColor;
>			width: 100%;
>			border: 0;
>			margin: 0;
>			padding: 6px 0 7px;
>			display: block;
>			min-width: 0;
>			box-sizing: content-box;
>			background: none;
>			-webkit-tap-highlight-color: transparent;
>		}
>		.MuiInput-underline-55:before {
>		left: 0;
>		right: 0;
>		bottom: 0;
>		content: "\00a0";
>		position: absolute;
>		transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
>		border-bottom: 1px solid rgba(0, 0, 0, 0.42);
>		pointer-events: none;
>		}
>		.MuiInput-underline-55:after {
>		left: 0;
>		right: 0;
>		bottom: 0;
>		content: "";
>		position: absolute;
>		transform: scaleX(0);
>		transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
>		border-bottom: 2px solid #303f9f;
>		pointer-events: none;
>		}
>	</style>
>	<body style="overflow: hidden;">
>		<noscript aria-hidden="true">You need to enable JavaScript to run this app.</noscript>
>		<div id="root" aria-hidden="true">
>			<div class="App">
>				<div>
>					<button>Click me!</button>
>					<p>
>						Clicking the above button brings up a MUI dialog which contains a simple header, 10 MUI text fields, and 10 interleaved divs. In Safari, if you make the height of the browser window short enough, you should see that the header and the 10 interleaved divs will either disappear completely, or will be cut off. I'm running Mojave 10.14.2, and Safari 12.0.2 (14606.3.4), running no extensions.
>					</p>
>					<p>
>						Full disclosure: one other developer saw the same issue I did, and another developer did not. We could not account for the difference. We are all running macOS, with Mojave 10.14.2 and Safari 12.0.2. Also, FWIW, Safari won't load this Codesandbox maybe 75% of the time. When it finally does load, it "works" in that it shows the error, but for whatever reason, Safari chokes.
>					</p>
>				</div>
>			</div>
>		</div>
>
>		<div role="dialog" class="MuiModal-root-15 MuiDialog-root-1">
>			<div class="MuiBackdrop-root-17" aria-hidden="true" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div>
>			<div class="MuiDialog-container-4 MuiDialog-scrollPaper-2" role="document" tabindex="-1" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
>				<div class="MuiPaper-root-19 MuiPaper-elevation24-45 MuiPaper-rounded-20 MuiDialog-paper-5 MuiDialog-paperScrollPaper-6">
>					<div class="MuiDialogContent-root-46">
>						<div style="background-color: green;">
>							header here
>						</div>
>						<div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="0" type="text" value="0">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="1" type="text" value="1">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="2" type="text" value="2">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="3" type="text" value="3">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="4" type="text" value="4">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="5" type="text" value="5">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="6" type="text" value="6">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="7" type="text" value="7">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="8" type="text" value="8">
>								</div>
>							</div>
>							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
>								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
>									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="9" type="text" value="9">
>								</div>
>							</div>
>						</div>
>					</div>
>				</div>
>			</div>
>		</div>
>	</body>
></html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
	
	<style>
		.MuiModal-root-15 {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1300;
			position: fixed;
		}
		
		.MuiDialog-scrollPaper-2 {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.MuiDialog-container-4 {
			height: 100%;
			outline: none;
		}
		
		.MuiDialog-paperScrollPaper-6 {
			flex: 0 1 auto;
			max-height: calc(100% - 96px);
		}
		
		.MuiDialog-paperScrollPaper-6 {
		flex: 0 1 auto;
		max-height: calc(100% - 96px);
		}
		.MuiDialog-paper-5 {
			margin: 48px;
			display: flex;
			position: relative;
			overflow-y: auto;
			flex-direction: column;
		}
		
		.MuiPaper-elevation24-45 {
			box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
		}
		
		.MuiPaper-rounded-20 {
			border-radius: 4px;
		}
		
		.MuiPaper-root-19 {
			background-color: #fff;
		}
		
		.MuiBackdrop-root-17 {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			position: fixed;
			touch-action: none;
			background-color: rgba(0, 0, 0, 0.5);
			-webkit-tap-highlight-color: transparent;
		}
		
		.MuiDialogContent-root-46 {
			flex: 1 1 auto;
			padding: 0 24px 24px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}
		
		.MuiDialogContent-root-46:first-child {
			padding-top: 24px;
		}
		.MuiFormControl-root-47 {
			margin: 0;
			border: 0;
			display: inline-flex;
			padding: 0;
			position: relative;
			min-width: 0;
			flex-direction: column;
			vertical-align: top;
		}
		
		.MuiFormControl-fullWidth-50 {
			width: 100%;
		}
		
		.MuiInputBase-root-64 {
			color: rgba(0, 0, 0, 0.87);
			cursor: text;
			display: inline-flex;
			font-size: 1rem;
			font-family: "Roboto", "Helvetica", "Arial", sans-serif;
			line-height: 1.1875em;
			align-items: center;
		}
		
		.MuiInputBase-fullWidth-73 {
			width: 100%;
		}
		
		.MuiInput-root-51 {
			position: relative;
		}
		.MuiInputBase-input-74 {
			font: inherit;
			color: currentColor;
			width: 100%;
			border: 0;
			margin: 0;
			padding: 6px 0 7px;
			display: block;
			min-width: 0;
			box-sizing: content-box;
			background: none;
			-webkit-tap-highlight-color: transparent;
		}
		.MuiInput-underline-55:before {
		left: 0;
		right: 0;
		bottom: 0;
		content: "\00a0";
		position: absolute;
		transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
		border-bottom: 1px solid rgba(0, 0, 0, 0.42);
		pointer-events: none;
		}
		.MuiInput-underline-55:after {
		left: 0;
		right: 0;
		bottom: 0;
		content: "";
		position: absolute;
		transform: scaleX(0);
		transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
		border-bottom: 2px solid #303f9f;
		pointer-events: none;
		}
	</style>
	<body style="overflow: hidden;">
		<noscript aria-hidden="true">You need to enable JavaScript to run this app.</noscript>
		<div id="root" aria-hidden="true">
			<div class="App">
				<div>
					<button>Click me!</button>
					<p>
						Clicking the above button brings up a MUI dialog which contains a simple header, 10 MUI text fields, and 10 interleaved divs. In Safari, if you make the height of the browser window short enough, you should see that the header and the 10 interleaved divs will either disappear completely, or will be cut off. I'm running Mojave 10.14.2, and Safari 12.0.2 (14606.3.4), running no extensions.
					</p>
					<p>
						Full disclosure: one other developer saw the same issue I did, and another developer did not. We could not account for the difference. We are all running macOS, with Mojave 10.14.2 and Safari 12.0.2. Also, FWIW, Safari won't load this Codesandbox maybe 75% of the time. When it finally does load, it "works" in that it shows the error, but for whatever reason, Safari chokes.
					</p>
				</div>
			</div>
		</div>

		<div role="dialog" class="MuiModal-root-15 MuiDialog-root-1">
			<div class="MuiBackdrop-root-17" aria-hidden="true" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div>
			<div class="MuiDialog-container-4 MuiDialog-scrollPaper-2" role="document" tabindex="-1" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
				<div class="MuiPaper-root-19 MuiPaper-elevation24-45 MuiPaper-rounded-20 MuiDialog-paper-5 MuiDialog-paperScrollPaper-6">
					<div class="MuiDialogContent-root-46">
						<div style="background-color: green;">
							header here
						</div>
						<div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="0" type="text" value="0">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="1" type="text" value="1">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="2" type="text" value="2">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="3" type="text" value="3">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="4" type="text" value="4">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="5" type="text" value="5">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="6" type="text" value="6">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="7" type="text" value="7">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="8" type="text" value="8">
								</div>
							</div>
							<div class="MuiFormControl-root-47 MuiFormControl-fullWidth-50">
								<div class="MuiInputBase-root-64 MuiInput-root-51 MuiInput-underline-55 MuiInputBase-fullWidth-73 MuiInput-fullWidth-58 MuiInputBase-formControl-65 MuiInput-formControl-52">
									<input aria-invalid="false" class="MuiInputBase-input-74 MuiInput-input-59" id="9" type="text" value="9">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Actions: View

Attachments on bug 194342: 361610 | 361611 | 361624