Develop Reference

How can I fix a completely random CSS glitch problem on mobile browsers only?

I have a website that I have developed: Mychordbook, it is an instrument learning website.
I have a strange GUI problem that I could not figure out for months. When you open the website from your mobile browser, chrome or safari (this problem does not exist on desktop). As the instrument is playing automatically or you click on the instrument to play the chord, strings on guitar/ukulele has white glitches, completely random (I could not figure out after which action it exactly happens). I have tried many things with CSS properties position or z-index. Nothing worked. Strangely, this glitch sometimes reveals the text beneath the instrument, although nothing is transparent there.
Just to give some ideas, here is the animation code for strings playing:
function play_string(inst, string){
...
// display red string
var string_played = $instruments[inst].$strings[string-1]
string_played.classList.remove('transition')
string_played.classList.add('playing')
setTimeout(()=>{ string_played.classList.add('transition')}, 100);
setTimeout(()=>{ string_played.classList.remove('playing')}, 200);
//display pick
var pick_played = $instruments[inst].$picks[string - 1]
pick_played.classList.remove('transition')
pick_played.classList.add('playing')
setTimeout(()=>{ pick_played.classList.add('transition')}, 100);
setTimeout(()=>{ pick_played.classList.remove('playing')}, 200);
}
...
I can also provide any code if anybody has any idea, since the codebase is really huge.
I have also recorded a video of the problem here:
https://www.youtube.com/watch?v=jcsxrPdp0lY
Some related CSS (You can go to check all other CSS from Mychordbook.com in any song page):
...
.guitar .string {
position: absolute;
left: 0;
width: 100%;
background-color: black;
z-index: 1;
}
.guitar .string.active {
background-color: white;
}
.guitar .string[data-string='1'] {
top: 8.333%;
margin-top: -0.5px;
height: 1px;
}
.guitar .string[data-string='2'] {
top: 25%;
margin-top: -0.5px;
height: 1px;
}
...
Lastly, I have seen this problem on my Iphone X (14.0.1 Safari) and Chrome 86.0.4240.77. I have also tried it on Andriod on which there is no problem. And strangely, not all Iphones also have this problem. I start to suspect this bug might not be about my code. I am open to any ides.

TinyMCE color picker dropdown appears off-screen

This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):

You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }

I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!

It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}

it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}

Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you

Remove place holder image from a div once dynamic content has been added to it

If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!

Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well

Galleria Deletion Icon

I've been working with the Galleria package to create a image gallery. I'm now wanting to add a deletion tool so that a user can delete any image they so desire.
Using this demo as a baseline, I've taken the elements of code which I need and tried to incorporate it into my gallery page here. The problem is, is that I cannot get the 'bin' icon to appear at the bottom of each image, and hence I'm unable to see whether the function which makes the image disappear from screen actually works. I don't need the code that deletes the image from the server. I'll be dealing with that later on.
I'm really quite new to Javacript and jQuery, so please feel free to speak down to me. But I've been working on this for weeks now and I just can't find a solution.
I just wondered whether someone could perhaps look at this and let me know where I'm going wrong.
Many thanks and regards

adding this style to your CSS rule:
.btn-delete {
width: 14px; height: 14px;
margin: 38px 0 0 66px;
position: absolute;
}
.icon-remove { background-position: -312px 0; }
.icon-white { background-image: url('http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png'); }
and in your jQuery:
$(".galleria-image").append(
"<span class='btn-delete icon-remove icon-white'></span>");
$(".btn-delete").live("click", function() {
var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src"));
return false;
});
this will do something like:
Now, you can simply send an ajax request using $.get() for example, passing the ID/SRC of the image that the user wanted to delete and refresh your code/remove all images that belong to that selected one.

IE6/7 And ClassName (JS/HTML)

I am trying to change the class of an element using javascript.
So far I'm doing :
var link = document.getElementById("play_link");
link.className = "play_button";
edit: here is the actual code that replace the classname
In the HTML :
In the Javascript
function changeCurrentTo(id){
activatePlayButton(current_track);
current_track = id;
inactivatePlayButton(current_track);
}
function inactivatePlayButton(id){
document.getElementById("recording_"+id).style.backgroundColor="#F7F2D1";
var link = document.getElementById("play_link_"+id);
link.className="stop_button";
link.onclick = function(){stopPlaying();return false;};
}
function activatePlayButton(id){
document.getElementById("recording_"+id).style.backgroundColor="";
var link = document.getElementById("play_link_"+id);
link.className = "play_button";
var temp = id;
link.onclick = function(){changeCurrentTo(temp);return false;};
}
with
.play_button{
background:url(/images/small_play_button.png) no-repeat;
width:25px;
height:24px;
display:block;
}
the old class is
.stop_button{
background:url(/images/small_stop_button.png) no-repeat;
width:25px;
height:24px;
display:block;
}
The context is a music player. When you click the play button (triangle) it turns into a stop button (square) and replace the function that is called.
The problem is that the class get changed, but in IE6 and 7 the new background (here /images/small_play_button.png) does not display right away. Sometime it doesn't even display at all. Sometime it doesn't display but if I shake the mouse a bit then it displays.
It works perfectly in FF, Chrome, Opera and Safari, so it's an IE bug. I know it's hard to tell right away from only these information, but if I could get some pointers and directions that would be helpful.
Thanks-

You should create one image with a width of 50px and a height of 24px where you have both the play part and the stop part. Then you just ajust the background position like this:
.button
{
background-image: url(/images/small_buttons.png);
bacground-repeat: no-repeat;
width: 25px;
height: 24px;
display: block;
}
.play_button
{
background-position: left top;
}
.stop_button
{
background-position: right top;
}
Then you load "both images" at the same time, and no delay will happen when you change which part of the image gets displayed.
Note that I have made a new CSS class so that you dont need to repeat your CSS for different buttons. You now need to apply two classes on your element. Example:
<div class="button play_button"></div>

You need to use setAttribute in your two funcitons. Try this out:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

Without seeing the exact markup, it's difficult to say, but the disappearing background image issue in IE is probably solved by adding a position: relative; declaration to the .button class and/or to its parent div.