Fix for incorrect hover styles for buttons on mobile devices

CHANGES.md

@@ -10,6 +10,7 @@ Fixed Issues:
 * [#4301](https://github.com/ckeditor/ckeditor4/issues/4301): Fixed: Pasted content is overwritten when pasted in initially empty editor with [`div` enter mode](https://ckeditor.com/docs/ckeditor4/latest/features/enterkey.html).
 * [#4351](https://github.com/ckeditor/ckeditor4/issues/4351): Fixed: Incorrect values for RGBA/HSLA colors in [Color Dialog](https://ckeditor.com/cke4/addon/colordialog).
 * [#4509](https://github.com/ckeditor/ckeditor4/issues/4509): Fixed: Incorrect handling of drag & drop inside [widgets](https://ckeditor.com/cke4/addon/widget) and nested editables.
+* [#4611](https://github.com/ckeditor/ckeditor4/issues/4611): [Android, iOS] Fixed: Incorrect hover styles for buttons in the toolbar on mobile devices.
 
 ## CKEditor 4.16
 

skins/kama/richcombo.css

@@ -79,6 +79,23 @@ a.cke_combo_button
 	outline: none;
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+
+	.cke_combo_off .cke_combo_button:hover
+	{
+		background: url(images/sprites.png) 0 -100px repeat-x;	/* For backwards compatibility. */
+		background: linear-gradient(to top, #fff, #d3d3d3 100px);
+	}
+
+	/* We need to restore :active styles. */
+	.cke_combo_off .cke_combo_button:active
+	{
+		background: #DFF1FF;
+		outline: none;
+	}
+}
+
 .cke_rtl .cke_combo_button
 {
 	float: right;
@@ -133,6 +150,21 @@ a.cke_combo_button
 	opacity: 1;
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+
+	.cke_combo_off .cke_combo_button:hover .cke_combo_inlinelabel
+	{
+		opacity: 0.70;
+	}
+
+	/* We need to restore :active styles. */
+	.cke_combo_off .cke_combo_button:active .cke_combo_inlinelabel
+	{
+		opacity: 1;
+	}
+}
+
 /* The handler which opens the panel of rich combo properties.
    It holds an arrow as a visual indicator. */
 .cke_combo_open

skins/kama/toolbar.css

@@ -179,6 +179,31 @@ a.cke_button_off:active
 	opacity: 1;
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+	a.cke_button_off:hover
+	{
+		background: transparent;
+		opacity: 0.7;
+	}
+
+	a.cke_button_on:hover {
+		background-color: #a3d7ff;
+	}
+
+	/* We need to restore :active styles. */
+	a.cke_button_off:active
+	{
+		background-color: #dff1ff;
+		opacity: 1;
+	}
+
+	a.cke_button_on:active
+	{
+		background-color: #86caff;
+	}
+}
+
 /* The icon which is a visual representation of the button. */
 .cke_button_icon
 {

skins/moono-lisa/richcombo.css

@@ -113,14 +113,29 @@ a.cke_combo_button
 	outline: none;
 }
 
-
-
 .cke_combo_on a.cke_combo_button,
 .cke_combo_off a.cke_combo_button:active
 {
 	background: #fff;
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+
+	.cke_combo_off a.cke_combo_button:hover
+	{
+		background: transparent;
+		border-color: transparent;
+	}
+
+	/* We need to restore :active styles. */
+	.cke_combo_off a.cke_combo_button:active
+	{
+		background: #fff;
+		border: 1px solid #bcbcbc;
+	}
+}
+
 .cke_rtl .cke_combo_on a.cke_combo_button,
 .cke_rtl .cke_combo_off a.cke_combo_button:hover,
 .cke_rtl .cke_combo_off a.cke_combo_button:focus,

skins/moono-lisa/toolbar.css

@@ -178,6 +178,35 @@ a.cke_button_expandable.cke_button_off:active
 	padding: 1px 3px;
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+	a.cke_button_off:hover
+	{
+		background: transparent;
+		border: 0;
+		padding: 4px 6px;
+	}
+
+	a.cke_button_expandable.cke_button_off:hover
+	{
+		padding: 4px 5px;
+	}
+
+	/* We need to restore :active styles. */
+	a.cke_button_off:active
+	{
+		background: #e5e5e5;
+		border: 1px #bcbcbc solid;
+		/* Compensate the border change */
+		padding: 3px 5px;
+	}
+
+	a.cke_button_expandable.cke_button_off:active
+	{
+		padding: 3px 4px;
+	}
+}
+
 
 /* Disabled Button states. */
 a.cke_button_disabled:hover,

skins/moono/richcombo.css

@@ -109,6 +109,41 @@ a.cke_combo_button
 	box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+
+	.cke_combo_off a.cke_combo_button:hover
+	{
+		background: #e4e4e4;
+		background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
+		filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
+
+		outline: none;
+	}
+
+	.cke_combo_on a.cke_combo_button:hover
+	{
+		box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+	}
+
+	/* We need to restore :active styles. */
+	.cke_combo_off a.cke_combo_button:active
+	{
+		border: 1px solid #777;
+
+		box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.6) inset;
+
+		background: #b5b5b5;
+		background-image: linear-gradient(to bottom, #aaa, #cacaca);
+		filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#aaaaaa', endColorstr='#cacaca');
+	}
+
+	.cke_combo_on a.cke_combo_button:active
+	{
+		box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
+	}
+}
+
 .cke_rtl .cke_combo_button
 {
 	float: right;

skins/moono/toolbar.css

@@ -196,6 +196,37 @@ a.cke_button_disabled:active
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
 }
 
+/* Disable hover styles on mobile devices (#4611). */
+@media screen and ( hover: none ) {
+	a.cke_button_off:hover,
+	a.cke_button_disabled:hover
+	{
+		box-shadow: none;
+		background: transparent;
+		filter: none;
+	}
+
+	a.cke_button_on:hover
+	{
+		box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
+	}
+
+	/* We need to restore :active styles. */
+	a.cke_button_off:active,
+	a.cke_button_disabled:active
+	{
+		box-shadow: 0 0 1px rgba(0,0,0,.3) inset;
+		background: #ccc;
+		background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
+		filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
+	}
+
+	a.cke_button_on:active
+	{
+		box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
+	}
+}
+
 /* The icon which is a visual representation of the button. */
 .cke_button_icon
 {

tests/plugins/toolbar/manual/hover/__template__.html

@@ -0,0 +1,47 @@
+<h2><code>Iframe</code>-based editor</h2>
+<div id="iframe-editor" contenteditable="true">
+	<p>Foo Bar</p>
+</div>
+
+<h2><code>Div</code>-based editor</h2>
+<div id="div-editor" contenteditable="true">
+	<p>Foo Bar</p>
+</div>
+
+<script>
+	( function() {
+		var pathRegex = /(android|ios|desktop)(?:button|richcombo)(moono|kama)?/i,
+			match = location.pathname.match( pathRegex ),
+			expectedEnv = match[ 1 ],
+			skin = match[ 2 ] ? match[ 2 ] : 'moono-lisa';
+
+		if ( isIgnoredEnv( expectedEnv ) ) {
+			bender.ignore();
+		}
+
+		CKEDITOR.replace( 'iframe-editor', {
+			skin: skin
+		} );
+		CKEDITOR.replace( 'div-editor', {
+			extraPlugins: 'divarea',
+			skin: skin
+		} );
+
+		// Slighly repeats logic from CKEDITOR.env, which could be
+		// unavailable upon test loading.
+		function isIgnoredEnv( expected ) {
+			var userAgent = navigator.userAgent.toLowerCase(),
+				isIOs = /(ipad|iphone|ipod)/.test( userAgent ),
+				isAndroid = userAgent.indexOf( 'android' ) > -1,
+				isDesktop = !isIOs && !isAndroid;
+
+			if ( expected === 'android' ) {
+				return !isAndroid;
+			} else if ( expected === 'ios' ) {
+				return !isIOs;
+			} else if ( expected === 'desktop' ) {
+				return !isDesktop;
+			}
+		}
+	}() );
+</script>

tests/plugins/toolbar/manual/hover/androidbutton.md

@@ -0,0 +1,29 @@
+@bender-tags: 4.16.1, 4611, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language
+
+## Procedure (Moono-Lisa on Android device)
+
+1. Check if buttons have hover styles (darker background) by long tapping on them and releasing the finger.
+
+  ### Expected result
+
+  * There are hover styles **during** the tap.
+  * There aren't any hover styles **after** releasing the finger.
+
+  ### Unexpected result
+
+  * There aren't any hover styles **during** the tap.
+  * There are hover style **after** releasing the finger.
+
+2. Check if taping on buttons activate their toggled on state (lighter background).
+
+  ### Expected result
+
+  * Tapped button has toggled on state.
+
+  ### Unexpected result
+
+  * Tapped button does not have toggled on state.
+
+3. Repeat the procedure for the second editor.

tests/plugins/toolbar/manual/hover/androidbuttonkama.md

@@ -0,0 +1,41 @@
+@bender-tags: 4.16.1, 4611, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language
+
+## Procedure (Kama on Android device)
+
+1. Check if buttons have hover styles (light-blue background) by long tapping on them and releasing the finger.
+
+  ### Expected result
+
+  * There are hover styles **during** the tap.
+  * There aren't any hover styles **after** releasing the finger.
+
+  ### Unexpected result
+
+  * There aren't any hover styles **during** the tap.
+  * There are hover style **after** releasing the finger.
+
+2. Check if taping on buttons activate their toggle on state (darker blue background).
+
+  ### Expected result
+
+  * Tapped button has toggled on state.
+
+  ### Unexpected result
+
+  * Tapped button does not have toggled on state.
+
+3. Check if toggled on buttons have hover styles (even darker blue background) by long tapping on them and releasing the finger.
+
+  ### Expected result
+
+  * There are hover styles **during** the tap.
+  * There aren't any hover styles **after** releasing the finger.
+
+  ### Unexpected result
+
+  * There aren't any hover styles **during** the tap.
+  * There are hover style **after** releasing the finger.
+
+4. Repeat the procedure for the second editor.

tests/plugins/toolbar/manual/hover/androidbuttonmoono.md

@@ -0,0 +1,41 @@
+@bender-tags: 4.16.1, 4611, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language
+
+## Procedure (Moono on Android device)
+
+1. Check if buttons have hover styles (darker background) by long tapping on them and releasing the finger.
+
+  ### Expected result
+
+  * There are hover styles **during** the tap.
+  * There aren't any hover styles **after** releasing the finger.
+
+  ### Unexpected result
+
+  * There aren't any hover styles **during** the tap.
+  * There are hover style **after** releasing the finger.
+
+2. Check if taping on buttons activate their toggle on state ("pressed in" button).
+
+  ### Expected result
+
+  * Tapped button has toggled on state.
+
+  ### Unexpected result
+
+  * Tapped button does not have toggled on state.
+
+3. Check if toggled on buttons have hover styles (additional shadow, "deeper pressed in" button) by long tapping on them and releasing the finger.
+
+  ### Expected result
+
+  * There are hover styles **during** the tap.
+  * There aren't any hover styles **after** releasing the finger.
+
+  ### Unexpected result
+
+  * There aren't any hover styles **during** the tap.
+  * There are hover style **after** releasing the finger.
+
+4. Repeat the procedure for the second editor.