Challenge with displaying spans in Chrome browser

Question

Challenge with displaying spans in Chrome browser

I am currently facing an issue with a running news ticker that displays correctly in Firefox but not in all versions of Chrome:

<div id="a" style="position:fixed; bottom:50px; height:30px;">
  <span id="b" style="display:inline; position:absolute;">blah blah text one two three.</span>
</div>

Upon loading the document, I utilize a jQuery function to set the CSS properties (specifically adjusting the left positional value of #b) so that the text moves from right to left. Once the text is completely off the screen, I reset the left positional value of #b back to screen.width.

However, in Chrome, the text of #b gets cut off to only 1-2 words and remains broken into multiple lines without changing back (unlike in Firefox where it shows correctly like a news ticker). After doing some investigation, I discovered this behavior in Chrome and was wondering how I can avoid it or if this is a bug specific to Chrome.

html css google-chrome

Answer 1

Answer №1

Upon testing in Opera, I observed the text breaking into multiple lines, suggesting that this issue may not be exclusive to Chrome. To resolve the multi-line problem, I removed the position: absolute property. However, it raises the question of whether this position is necessary for animations.

EDIT: Further investigation revealed that the issue is not related to positioning. The problem stems from element a lacking width, causing the browser to reduce the width of element b to a minimum. Adding a width attribute should rectify this issue. For optimal results, a width slightly exceeding 100% is recommended to accommodate the hidden b. Below is an example demonstrating this solution with a width of 200%, which functions correctly on Opera, Firefox, and Chrome.

<html>
<body>
<script language="javascript">
var pos = innerWidth;
function setTimer() {
    b = document.getElementById('b')
    pos = pos - 10;
    if(pos <= 0)
        pos = innerWidth;
    b.style.left = pos+"px";
    setTimeout(setTimer,100);
}

</script>
<button onclick="setTimer()">start</button>
<div id="a" style="position:fixed; bottom:50px; height:30px; background-color: gold; width:200%">
  <span id="b" style="position:absolute; background-color: teal">blah blah text one two three.</span>
</div>
</body>
</html>

Answer 2

Upon testing in Opera, I observed the text breaking into multiple lines, suggesting that this issue may not be exclusive to Chrome. To resolve the multi-line problem, I removed the position: absolute property. However, it raises the question of whether this position is necessary for animations.

EDIT: Further investigation revealed that the issue is not related to positioning. The problem stems from element a lacking width, causing the browser to reduce the width of element b to a minimum. Adding a width attribute should rectify this issue. For optimal results, a width slightly exceeding 100% is recommended to accommodate the hidden b. Below is an example demonstrating this solution with a width of 200%, which functions correctly on Opera, Firefox, and Chrome.

<html>
<body>
<script language="javascript">
var pos = innerWidth;
function setTimer() {
    b = document.getElementById('b')
    pos = pos - 10;
    if(pos <= 0)
        pos = innerWidth;
    b.style.left = pos+"px";
    setTimeout(setTimer,100);
}

</script>
<button onclick="setTimer()">start</button>
<div id="a" style="position:fixed; bottom:50px; height:30px; background-color: gold; width:200%">
  <span id="b" style="position:absolute; background-color: teal">blah blah text one two three.</span>
</div>
</body>
</html>

Challenge with displaying spans in Chrome browser

Answer №1

Similar questions

Having trouble with jQuery Ajax partially view rendering more than once?

What is the process for altering the CSS path within an HTML helper in CakePHP 3.x?

Tips for displaying unformatted text using HTML

Sending Values from Google Apps Script to HTML Elements

Enhance form validation by utilizing jquery.validate to display appropriate icons indicating correct and incorrect input, with the option to

Tips for effectively triggering an animation only once when the element is in view using React

Is there a way to submit a form without navigating away from the current webpage?

Insert an svg element into the content property

Transfer data from one table to another on a different PHP page

What is the method for assigning a custom CssClass to the THEAD element within a dynamically generated HTML table?

Develop a stylish HTML/CSS box featuring a trio of diagonal gradient colors

Issue with background repetition in CSS

Can you assist in resolving this logical problem?

Reposition the element at the bottom of its parent element

Including tabs from a different HTML page within a tab on my own HTML page - enhancing the user interface of a web application

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Obtain the beginning and ending positions of a substring within a larger string

Tips for transferring information from a form to your email address

"Encountering an error of undefined index when dealing with multiple file