Skip to content

Instantly share code, notes, and snippets.

@deadflowers
Last active February 6, 2025 04:10
Show Gist options
  • Select an option

  • Save deadflowers/ed4b9f109365fced914ae34b9f61144e to your computer and use it in GitHub Desktop.

Select an option

Save deadflowers/ed4b9f109365fced914ae34b9f61144e to your computer and use it in GitHub Desktop.
hotfix for RSS News

RSS News Hotfix Test

target: readmore class | test root: phone.html | date: 02-05-2025

Testing some changes to typical phone (cough iphone) issues on hover/click/select events and pseudos.

To elaborate current theme is a clean monochrome and there are select styling transitions taking place that are unpleasant as the property changes are clashing and stacking up. remove nearly anything not designed by us. Well, figuratively. Like the royal "we" ? OK just me.

<!--
hotfix: phone styles on selectino of links and hovers iphone/android
gist: https://gist.github.com/deadflowers/ed4b9f109365fced914ae34b9f61144e/
-->
<style>
@charset="UTF-8";
/* more safari iphone fixes. safari is the new ie */
.rssPost .readMore {
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent; /* Remove black highlight */
tap-highlight-color: transparent; /* Remove black highlight */
-webkit-appearance: none !important; /* Prevent default iOS styles */
appearance: none !important; /* Prevent default iOS styles */
-webkit-touch-callout: none; /* Prevents callout menus on touch */
touch-callout: none; /* Prevents callout menus on touch */
pointer-events: auto;
cursor: pointer;
-webkit-touch-action: manipulation; /* account for touch/active differences */
touch-action: manipulation;
}
.readMore:active {
-webkit-touch-action: manipulation;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
</style>
<script>
// IOS fixes - Safari is the new IE
document.querySelectorAll('.readMore').forEach(button => {
button.addEventListener('touchstart', () => button.classList.add('active'));
button.addEventListener('touchend', () => button.classList.remove('active'));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment