The fixed position element appears to be failing to stay fixed in Google Chrome

Something strange is happening with a fixed position element in Chrome. It is still scrolling with the page even though it should be fixed. To better understand the issue, you can view it on the live site

In Firefox and even IE, the "Block 1 Block 2 Block 3" text behaves correctly, sticking to the top of the screen as expected. However, in Chrome, it jumps to its fixed position prematurely and continues to scroll despite being set as fixed. It's truly one of the most bizarre things I've ever encountered.

javascripthtmlcss

Answer №1

The issue seems to be related to your use of transforms.

Refer to the specification: The Transform Rendering Model

When a value other than 'none' is specified for the 'transform' property, a new local coordinate system is established at the element to which it is applied.

Therefore, an element with fixed positioning will be positioned relative to the element with the transform, not the viewport.

Check out this FIDDLE in a webkit browser to observe this behavior in action

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}

Answer №2

It seems there is a glitch in Chrome (and Safari, although Chrome is the main concern here).

I have not come across any existing reports on this issue; I recommend submitting a detailed report to Chromium Issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Ionic for local data retention

Seeking assistance with connecting my app to local storage in order to save data on the user's device without resetting every time the app is closed. Struggling to link local storage to an array of objects. Any guidance would be highly appreciated. Re ...

javascriptangularjslocal-storageionic-framework

Angular library modules for node packages

After developing my latest library, I noticed some red underlines: https://i.stack.imgur.com/ffAjI.png In this package, I plan to incorporate other npm packages like ionic and crypto. I attempted to update the package.json within the library: { "name ...

javascriptnode.jsangularnpm

What is the best way to transfer a variable from an @Input property to a service within an Angular2 component?

I'm tackling what seems like a simple task, but I'm struggling to figure it out. My issue is this: How can I successfully pass a variable from @Input to a service in an Angular2 component? (Code has been simplified) This is my current component ...

javascriptangulartypescript

Performing multiple Axios POST requests within a loop in a REACT application with dynamic variables

For my form inputs, I have an array of labels named changing_variable, which depend on the user's selection from a dropdown menu and vary in value. I'm trying to pass this dynamic variable to Axios.post method to correctly input data into my dat ...

javascriptreactjsreact-hooksaxios

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

javascriptjqueryprototype

AngularJS $scope variable issue

After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data. Below is the HTML code: <html data-ng-app=""> <head> <title>Example 4: Using AngularJS Directives an ...

javascriptangularjsangularjs-scope

Tips for adjusting a pre-filled form?

When a form is rendered by onClick from a component, it loads with values. I want to be able to edit these current values and then perform an update operation. Here is the link to the sandbox: https://codesandbox.io/s/material-demo-forked-e9fju?file=/demo ...

javascriptreactjsmaterial-ui

Inserting duplicate rows from CSV using JavaScript

Currently, I am utilizing Papaparse to sum up rows with duplicate SKUs in my CSV file. I'm striving to achieve this task without the use of additional JS libraries such as D3. Here is a snippet of how my CSV data is structured: SKU,Daily total,Weekly ...

javascriptajaxcsv

Changing the color of MUI Typography when selected

Struggling to modify the styling of the Typography component nested inside a MenuItem. Unable to apply styles to ListItem as intended Check out my code here: https://codesandbox.io/s/dztbc?file=/demo.tsx:1481-1804 Desired behavior: Change styling on sele ...

cssreactjsmaterial-uimenuitemtypography

What's the best way to adjust the width of the <Input> component in Reactstrap?

How can I adjust the width of an input element in Reactstrap to be smaller? I've attempted to set the bsSize to small without success <InputGroup> <Input type="text" name="searchTxt" value={props.searchText ...

javascriptreactjsreactstrap

Unable to show input in Javascript HTML

Every time I try to run this code on my webpage, the buttons do not seem to respond when clicked. I am aiming to have the user input for full name, date of birth, and gender displayed in the text box when the display button is clicked. When the next butt ...

javascripthtml

Whenever I click on something, my preloader animation pops up without fail

Is there a way to make my preloader animation only appear once when entering the website or just for the home page, instead of every time I click on something? <div class="loader"><div style="width=150%; height=150%; background-color:white;" id=" ...

javascriptjqueryanimationpreloader

RouterContext Error: Invariant violation: Do not utilize <withRouter(App) /> in a context without a <Router> present

After wrapping my app with BrowserRouter and trying to export it as withRouter(App), I encountered the following error in the browser: 16 | return ( 17 | <RouterContext.Consumer> 18 | {context => { > 19 | invariant( | ^ ...

javascriptreactjs

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

htmlcss

Issue with Foundation 6 not triggering the change.zf.slider event

Hey there, this is my first time posting and I could really use some help... I'm struggling to make the $("[data-slider]").on('change.zf.slider', function(){}); event trigger. I've attempted using the id of the element like so $(" ...

javascriptjqueryhtmlzurb-foundation

When an element within a dropdown is hovered over, a dropdown menu is triggered

As a newcomer to Web Development, I am facing a fundamental issue with my bootstrap navigation bar. The navigation bar contains multiple dropdown buttons that activate on hover. One of the buttons within a dropdown needs another dropdown to appear when hov ...

htmlcss

Tips for making radio button selection mandatory in an HTML5 form

How can I require a user to select one radio button in an HTML 5 form before submitting it? I attempted to use the required attribute, but since there is no radio button group, how can I apply this requirement? <form action="/Home/Sendtitle" method=" ...

htmlformsvalidationradio-buttonform-submit

How to trigger a JavaScript function using a link in CakePHP?

When working with Html, <a href="some_url"> Contact Seller </a> In the realm of Cakephp, <?php echo $this->Html->link('Contact Seller', array('controller'=>'pages', 'action'=>'conta ...

javascriptphphtmlcakephp

Difficulties arise when retrieving the value of a radio input in PHP using the model-view-controller framework

My attempt to retrieve the value of a group of radio inputs in a form is not successful. VIEW: <form class="form-horizontal" method="post" action="Index.php?opt=filter"> stuff... . . . <div class="form-group"> <label class="col-md-4 ...

phphtmlforms

JS editing an array in a datatable

I have created an HTML page where users can enter data, which is then uploaded to a SQL server. I have been studying DataTables to load an array into a table and tried editing it, but still haven't had success. Can anyone offer assistance? var array ...

javascripthtmldatatable