The following way of setting the background color of an anchor tag in Safari on iOS 15 isn't working:
<html>
<head></head>
<body><p><a class="content" href="#"><strong><span>Some content with background</span></strong></a> </p>
<br />
<button onclick="javascript:onClick();">Click me to change content's background color</button>
<script>
function onClick(){
var element = document.getElementsByClassName('content')[0];
element.style.backgroundColor = "#888888";
}
</script>
</body>
</html>
I had to run the following hack after setting the backgroundColor in order for it to work:
// Temporary workaround to redraw the element:
var disp = element.style.display;
element.style.display = 'none';
var trick = element.offsetHeight;
element.style.display = disp;
Video demonstration: https://www.dropbox.com/s/2z4kmsypj4ov4sd/iOS%2015%20webkit%20bug.mov?dl=0
Surely this is a bug in Safari unless I might've missed something?
Update from Apple:
We believe your issue may be resolved in the macOS 12.3 seed. Please verify this issue with macOS 12.3 Beta and update your bug report with your results by logging into https://feedbackassistant.apple.com/ or by using the Feedback Assistant app.
macOS 12.3 Beta (21E5196i) https://developer.apple.com/download/ Posted Date: Jan. 27th, 2022
If the issue persists, please attach a new sysdiagnose captured in the latest build and attach it to the bug report. Thank you.
macOS sysdiagnose Instructions: https://developer.apple.com/services-account/download?path=/OS_X/OS_X_Logs/sysdiagnose_Logging_Instructions.pdf