Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Safari iOS data for cursor CSS property #24387

Merged
merged 2 commits into from
Sep 25, 2024
Merged

Update Safari iOS data for cursor CSS property #24387

merged 2 commits into from
Sep 25, 2024

Conversation

queengooborg
Copy link
Collaborator

@queengooborg queengooborg commented Sep 9, 2024 •
edited
Loading

This PR updates and corrects version values for Safari iOS/iPadOS for the cursor CSS property. While the browser may recognize the various cursor values, it has no effect on iPhones and iPads without a touchpad. iPadOS 13.4 was the version that introduced touchpad support, so that version number was used. Fixes #24142.

Test Code Used:

<!DOCTYPE html>
<html>
	<head>
		<meta content="width=device-width">
		<style id="persistent-style">
			/* Persistent styling */
			body {
				background-color: black;
				color: white;
				margin: 0;
				padding: 0;
			}
			canvas {
				background-color: white;
			}
		</style>

		<style id="test-style">
			#alias {
				cursor: alias;
			}
			#all-scroll {
				cursor: all-scroll;
			}
			#auto {
				cursor: auto;
			}
			#cell {
				cursor: cell;
			}
			#col-resize {
				cursor: col-resize;
			}
			#context-menu {
				cursor: context-menu;
			}
			#copy {
				cursor: copy;
			}
			#crosshair {
				cursor: crosshair;
			}
			#default {
				cursor: default;
			}
			#e-resize {
				cursor: e-resize;
			}
			#ew-resize {
				cursor: ew-resize;
			}
			#grab {
				cursor: grab;
			}
			#grabbing {
				cursor: grabbing;
			}
			#help {
				cursor: help;
			}
			#move {
				cursor: move;
			}
			#n-resize {
				cursor: n-resize;
			}
			#ne-resize {
				cursor: ne-resize;
			}
			#nesw-resize {
				cursor: nesw-resize;
			}
			#no-drop {
				cursor: no-drop;
			}
			#none {
				cursor: none;
			}
			#not-allowed {
				cursor: not-allowed;
			}
			#ns-resize {
				cursor: ns-resize;
			}
			#nw-resize {
				cursor: nw-resize;
			}
			#nwse-resize {
				cursor: nwse-resize;
			}
			#pointer {
				cursor: pointer;
			}
			#progress {
				cursor: progress;
			}
			#row-resize {
				cursor: row-resize;
			}
			#s-resize {
				cursor: s-resize;
			}
			#se-resize {
				cursor: se-resize;
			}
			#sw-resize {
				cursor: sw-resize;
			}
			#text {
				cursor: text;
			}
			#url {
				cursor: url;
			}
			#vertical-text {
				cursor: vertical-text;
			}
			#w-resize {
				cursor: w-resize;
			}
			#wait {
				cursor: wait;
			}
			#zoom-in {
				cursor: zoom-in;
			}
			#zoom-out {
				cursor: zoom-out;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<p id="alias">alias</p>
			<p id="all-scroll">all-scroll</p>
			<p id="auto">auto</p>
			<p id="cell">cell</p>
			<p id="col-resize">col-resize</p>
			<p id="context-menu">context-menu</p>
			<p id="copy">copy</p>
			<p id="crosshair">crosshair</p>
			<p id="default">default</p>
			<p id="e-resize">e-resize</p>
			<p id="ew-resize">ew-resize</p>
			<p id="grab">grab</p>
			<p id="grabbing">grabbing</p>
			<p id="help">help</p>
			<p id="move">move</p>
			<p id="n-resize">n-resize</p>
			<p id="ne-resize">ne-resize</p>
			<p id="nesw-resize">nesw-resize</p>
			<p id="no-drop">no-drop</p>
			<p id="none">none</p>
			<p id="not-allowed">not-allowed</p>
			<p id="ns-resize">ns-resize</p>
			<p id="nw-resize">nw-resize</p>
			<p id="nwse-resize">nwse-resize</p>
			<p id="pointer">pointer</p>
			<p id="progress">progress</p>
			<p id="row-resize">row-resize</p>
			<p id="s-resize">s-resize</p>
			<p id="se-resize">se-resize</p>
			<p id="sw-resize">sw-resize</p>
			<p id="text">text</p>
			<p id="url">url</p>
			<p id="vertical-text">vertical-text</p>
			<p id="w-resize">w-resize</p>
			<p id="wait">wait</p>
			<p id="zoom-in">zoom-in</p>
			<p id="zoom-out">zoom-out</p>
		</div>

		<script>
			
		</script>
	</body>
</html>

@queengooborg
Update Safari iOS data for cursor CSS property
50ef141 
This PR updates and corrects version values for Safari iOS/iPadOS for the `cursor` CSS property. While the browser may _recognize_ the various cursor values, it has no effect on iPhones and iPads without a touchpad.  iPadOS 13.4 was the version that introduced touchpad support, so that version number was used.

Test Code Used:
```html
<!DOCTYPE html>
<html>
	<head>
		<meta content="width=device-width">
		<style id="persistent-style">
			/* Persistent styling */
			body {
				background-color: black;
				color: white;
				margin: 0;
				padding: 0;
			}
			canvas {
				background-color: white;
			}
		</style>

		<style id="test-style">
			#alias {
				cursor: alias;
			}
			#all-scroll {
				cursor: all-scroll;
			}
			#auto {
				cursor: auto;
			}
			#cell {
				cursor: cell;
			}
			#col-resize {
				cursor: col-resize;
			}
			#context-menu {
				cursor: context-menu;
			}
			#copy {
				cursor: copy;
			}
			#crosshair {
				cursor: crosshair;
			}
			#default {
				cursor: default;
			}
			#e-resize {
				cursor: e-resize;
			}
			#ew-resize {
				cursor: ew-resize;
			}
			#grab {
				cursor: grab;
			}
			#grabbing {
				cursor: grabbing;
			}
			#help {
				cursor: help;
			}
			#move {
				cursor: move;
			}
			#n-resize {
				cursor: n-resize;
			}
			#ne-resize {
				cursor: ne-resize;
			}
			#nesw-resize {
				cursor: nesw-resize;
			}
			#no-drop {
				cursor: no-drop;
			}
			#none {
				cursor: none;
			}
			#not-allowed {
				cursor: not-allowed;
			}
			#ns-resize {
				cursor: ns-resize;
			}
			#nw-resize {
				cursor: nw-resize;
			}
			#nwse-resize {
				cursor: nwse-resize;
			}
			#pointer {
				cursor: pointer;
			}
			#progress {
				cursor: progress;
			}
			#row-resize {
				cursor: row-resize;
			}
			#s-resize {
				cursor: s-resize;
			}
			#se-resize {
				cursor: se-resize;
			}
			#sw-resize {
				cursor: sw-resize;
			}
			#text {
				cursor: text;
			}
			#url {
				cursor: url;
			}
			#vertical-text {
				cursor: vertical-text;
			}
			#w-resize {
				cursor: w-resize;
			}
			#wait {
				cursor: wait;
			}
			#zoom-in {
				cursor: zoom-in;
			}
			#zoom-out {
				cursor: zoom-out;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<p id="alias">alias</p>
			<p id="all-scroll">all-scroll</p>
			<p id="auto">auto</p>
			<p id="cell">cell</p>
			<p id="col-resize">col-resize</p>
			<p id="context-menu">context-menu</p>
			<p id="copy">copy</p>
			<p id="crosshair">crosshair</p>
			<p id="default">default</p>
			<p id="e-resize">e-resize</p>
			<p id="ew-resize">ew-resize</p>
			<p id="grab">grab</p>
			<p id="grabbing">grabbing</p>
			<p id="help">help</p>
			<p id="move">move</p>
			<p id="n-resize">n-resize</p>
			<p id="ne-resize">ne-resize</p>
			<p id="nesw-resize">nesw-resize</p>
			<p id="no-drop">no-drop</p>
			<p id="none">none</p>
			<p id="not-allowed">not-allowed</p>
			<p id="ns-resize">ns-resize</p>
			<p id="nw-resize">nw-resize</p>
			<p id="nwse-resize">nwse-resize</p>
			<p id="pointer">pointer</p>
			<p id="progress">progress</p>
			<p id="row-resize">row-resize</p>
			<p id="s-resize">s-resize</p>
			<p id="se-resize">se-resize</p>
			<p id="sw-resize">sw-resize</p>
			<p id="text">text</p>
			<p id="url">url</p>
			<p id="vertical-text">vertical-text</p>
			<p id="w-resize">w-resize</p>
			<p id="wait">wait</p>
			<p id="zoom-in">zoom-in</p>
			<p id="zoom-out">zoom-out</p>
		</div>

		<script>
			
		</script>
	</body>
</html>
```
@queengooborg queengooborg added the data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label Sep 9, 2024
@caugner
Copy link
Contributor

caugner commented Sep 24, 2024

@queengooborg Did you test this with a physical device, or with BrowserStack?

@queengooborg
Copy link
Collaborator Author

This was on a physical device, specifically my iPad Pro!

ddbeck
ddbeck requested changes Sep 25, 2024
View reviewed changes
css/properties/cursor.json Outdated Show resolved Hide resolved
css/properties/cursor.json Show resolved Hide resolved
@ddbeck ddbeck mentioned this pull request Sep 25, 2024
Merged
ddbeck
ddbeck requested changes Sep 25, 2024
View reviewed changes
css/properties/cursor.json Outdated Show resolved Hide resolved
css/properties/cursor.json Show resolved Hide resolved
@queengooborg queengooborg merged commit 484650a into mdn:main Sep 25, 2024
6 checks passed
@queengooborg queengooborg deleted the css/properties/cursor/safariios-corrections branch September 25, 2024 18:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ddbeck ddbeck ddbeck approved these changes

Assignees
No one assigned
Labels
data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

css.properties.cursor - Conflicting reports about support on iOS
3 participants
@queengooborg @caugner @ddbeck