Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the problem is specific to Chrome.

The behavior can be seen in this screenshot:

https://i.sstatic.net/EzQdq.png

Here is the problematic page: . Upon scrolling to the end, you'll notice a large white box obscuring the final 15% - 20% of the content.

A few observations I have made are:

  1. Using a 15" MBP (1440 x 900 resolution) or a 27" Thunderbolt display (2560 x 1440), the page loads correctly when viewed on the bigger screen but exhibits the covering issue when moved to the smaller one.

  2. Upon inspecting the elements, all codes seem to load properly. However, it appears as though Chrome is overlaying a large box on top of the page. Even attempting to click and drag to select text is hindered by this mysterious box.

My development environment consists of Rails 3.2.13 and Ruby 2.0.0. The test was conducted on Chrome ver. 30.0.1599.101, Firefox ver. 25.0, and Safari 7.0. Disabling extensions did not resolve the issue.

htmlcssruby-on-railsgoogle-chrome

Answer №1

I encountered the same problem where long pages were getting cut off halfway only in Chrome. Despite trying other suggested solutions without success, I found that simply adjusting my css animations on the specific element resolved the issue. By removing the forwards property from the animation, the problem disappeared. Quite a peculiar fix indeed.

Previous code snippet:

animation: 0.2s fadeIn forwards 1 ease;

Updated code snippet:

animation: 0.2s fadeIn 1 ease;

Answer №2

I encountered a similar issue where the bottom of my page was getting chopped off and there was flickering while scrolling in Chrome. Interestingly, the problem didn't exist in other browsers.

After troubleshooting for quite some time, I discovered that the culprit was the {mix-blend-mode: multiply;} property on an element within the page. Once I removed it, all the strange rendering issues disappeared.

If anyone else is facing similar problems, give this solution a try. It might save you from hours of confusion like I went through.

Answer №3

Encountered a similar issue on two different projects, specifically noticed in Chrome on desktop (both Mac and Windows) and Chrome for Android.

Here are my findings:

  1. It seems that CSS animations have a limited visible 'render area'.
  2. When an animation is applied to an element using 'forwards', it gets stuck in that state and doesn't re-render.
  3. This can result in animation delays when multiple elements within the same container are animated with 'forwards'.

Solutions that worked for me:

  1. Reduce the animation 'area': try animating smaller pixel areas instead of large containers.
  2. If you need to animate a large container like fading in all content, avoid applying the animation directly to the container. Instead, create an overlay element that covers your content completely and animate that instead (fade out).

@TimothyBuktu's solution above was instrumental in guiding me in the right direction.

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

Uh oh! AngularJS just threw an error: Uncaught TypeError - angular.service is not a function. It happened in taskService.js

I've run into some issues with AngularJS, even though I have imported all the necessary libraries. Specifically, I am encountering the following errors: Uncaught TypeError: angular.service is not a function at taskService.js:2 taskFactory. ...

javascripthtmlangularjsangular-module

Use the angular cli to incorporate the CSS styles found in the node_modules directory

After successfully installing a new library with npm, I now face the challenge of importing the CSS into my project. It seems unwise to directly link to the node_modules folder. Can anyone suggest an easy way to import this CSS into my Angular CLI project? ...

cssangularjsnode.jsvendorangular-cli

Creating horizontal card overflow with arrow navigation in Bootstrap 4.5: A step-by-step guide

Using Bootstrap, I've created a snippet that generates an overflow card that can be scrolled horizontally. <div class="container"> {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}} <h4 class="mb- ...

phphtmlcsslaravelbootstrap-4

Modify animation trigger when mouse hovers over

I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering. animations: [ trigger('overlaySlide', [ state(&ap ...

htmlcssangulartypescript

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I ...

javascriptcssselenium-webdrivercypress

Connecting the search results page with the specific details page

Currently, I am developing a results page for my website and require assistance with linking each restaurant to a detail.php page. The project involves showcasing all the restaurants in San Francisco along with their health inspection scores, address, and ...

javascriptphpjqueryhtmlmysql

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

htmljquerycsslaraveljquery-ui

Issue with Bootstrap modal not closing automatically after submitting an ajax form

I am facing an issue with a modal on my page that is used for submitting courses registered by students. Even after successful submission, the modal closes but leaves behind a faded background. I have attempted various solutions from StackOverflow without ...

phphtmljqueryajax

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer

Are background styles complete without incorporating quotations?

Let's say I want to include a background image, my code might look like this: background: url(/images/button_bg.png) repeat-x scroll left bottom #146BAE However, when I check the code in Firebug, it shows: background: url("/images/button_bg.png") r ...

htmlcss

"Troubleshooting jQuery html() Function Issue in Firefox: Dealing with an Unterminated

Trying to insert the following string into a <p> element: (without specified charset) Цена: 4,80 BGN Поддръжка: (directly from .XML file) &#1062;&#1077;&#1085;&#1072;: 4,80 BGN Encountering ...

jqueryhtmlajaxchar

"Adding a large amount of HTML using .append() is causing slow performance in Internet Explorer 10

Lately, I've been encountering some challenges with jQuery code in my workplace. Unfortunately, I don't have the exact code on hand at the moment, but I'll do my best to provide pseudo-code. Being relatively new to JavaScript, there may be e ...

jqueryhtmlinternet-explorer

The CSS display:block property isn't functioning as intended

I'm currently working on a contact form using CSS and HTML, but I'm having trouble getting the boxes to display properly in a 'block' form (display:block). HTML: <section class="body"> <form method="post" action="index.php ...

htmlcss

Troubleshooting issue with Calendar styling in Bootstrap and SimpleCalendar Rails integration

I am having trouble applying styling to my SimpleCalendar in Rails, using the gem. When I render it, this is what I see: Here is the CSS provided by https://github.com/excid3/simple_calendar: .simple-calendar { table { -webkit-border-horizontal-spac ...

cssruby-on-railsrubytwitter-bootstrap

Refreshing a single div with a variety of potential hyperlinks

My knowledge of jQuery is limited, but I recently discovered a code snippet that should allow me to refresh only a specific div on my webpage: <script> $(document).ready(function(){ $(".reload").click(function(){ $("#day").load("/some_url #da ...

phpjqueryhtml

Including a hyperlink button within a Kendo Grid cell that is editable

I have a grid featuring a column for editable phone numbers. I want to include a small icon that users can click on to trigger a "tel: link" which will prompt their phone hardware to act accordingly. For a demo, check out this link -> Objective: Clic ...

cssgridkendo-grid

Decrease the dimensions of the image while maintaining its width at 100%

I've got a dilemma with the images on my website that are linked from image hosting sites. They all need to be displayed at 100% width, but some of them have huge pixel dimensions which cause slow loading times. Is there a way to resize the images wi ...

javascripthtmlcssimage

Issue with Bootstrap modal not dismissing when using click function

This is my custom function and div. When I click the function, it executes successfully but the modal window remains visible. <script type="text/javascript> $(document).ready(function () { $("#btnRespuesta").click(function () { //al ...

jquerycssajaxtwitter-bootstrap

Issues encountered with the functionality of action chains in selenium with python

I'm attempting to use a selenium chrome-driver to send an ALT+ESC command in order to move it to the background behind all other windows Here is the code snippet: from selenium.webdriver import Keys from selenium.webdriver.common.action_chains import ...

pythonseleniumgoogle-chrome

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

htmlcssdisplayobject-fit