Encountering safari crashes due to basic CSS styling?

<style>
    .panel { margin:0px }
    .panel:after { 
       content: attr(data-text);
       height:100px; 
       overflow:scroll; /* <- looks like this is the evil css */
       line-height:2em;
       display:block;
 }
</style>
<div class="panel">i read what you're saying but all that registers in my mind is blah blah blah </div>
<div class="panel" data-text="Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum."> yes
</div>

Could someone verify if, when clicking on the scrollbar, your browser crashes with a mousehandler error?

UPDATE
To be more specific..
that's the error message in the crash report log with Safari 5.0.6

WebCore::RenderLayer::scrollTo(int, int) + 714 WebCore::RenderLayer::setScrollOffset(WebCore::IntPoint const&) + 33 WebCore::ScrollableArea::setScrollOffsetFromAnimation(WebCore::IntPoint const&) + 30 WebCore::ScrollAnimator::notifyPositionChanged() + 43 WebCore::ScrollAnimator::scroll(WebCore::ScrollbarOrientation, WebCore::ScrollGranularity, float, float) + 140 WebCore::ScrollAnimatorMac::scroll(WebCore::ScrollbarOrientation, WebCore::ScrollGranularity, float, float) + 300 WebCore::ScrollableArea::scroll(WebCore::ScrollDirection, WebCore::ScrollGranularity, float) + 159 WebCore::Scrollbar::autoscrollPressedPart(double) + 123 WebCore::Scrollbar::mouseDown(WebCore::PlatformMouseEvent const&) + 129 WebCore::EventHandler::passMousePressEventToScrollbar(WebCore::MouseEventWithHitTestResults&, WebCore::Scrollbar*) + 58 WebCore::EventHandler::handleMousePressEvent(WebCore::PlatformMouseEvent const&) + 1424 WebCore::EventHandler::mouseDown(NSEvent*) + 385 -[WebHTMLView mouseDown:] + 475 WebCore::EventHandler::passMouseDownEventToWidget(WebCore::Widget*) + 388 WebCore::EventHandler::passWidgetMouseDownEventToWidget(WebCore::RenderWidget*) + 27 WebCore::EventHandler::passSubframeEventToSubframe(WebCore::MouseEventWithHitTestResults&, WebCore::Frame*, WebCore::HitTestResult*) + 720 WebCore::EventHandler::passMousePressEventToSubframe(WebCore::MouseEventWithHitTestResults&, WebCore::Frame*) + 56 WebCore::EventHandler::handleMousePressEvent(WebCore::PlatformMouseEvent const&) + 462 WebCore::EventHandler::mouseDown(NSEvent*) + 385 -[WebHTMLView mouseDown:] + 475 -[NSWindow sendEvent:] + 5381 0x1000 + 259380 0x1000 + 259265 -[NSApplication sendEvent:] + 2939 0x1000 + 223168 -[NSApplication run] + 867 NSApplicationMain + 574 0x1000 + 40174

Answer №1

After testing on Safari 6, it appears that the scrolling issue has been somewhat resolved. While I am able to scroll smoothly on version 6.0.3 of Safari on my Mac, unfortunately multi-touch functionality with the scrollbar is not working. This can be a problem if auto-hide is enabled in System Preferences, as the content becomes unscrollable. Despite this drawback, Safari 6 does not experience any crashing issues.

Regrettably, Windows users do not have access to Safari 6 and are stuck with version 5.1.7 which is also affected by this bug across both platforms. Although tabs may need to reload, the browser itself does not crash entirely due to this issue.

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

The Google Maps API continues to load the alert repeatedly

When incorporating the Google Maps API into my webpage, a location request alert pops up asking if the "webpage wants to know the location." After granting permission and reloading the page with the Google Maps API call running, the alert box does not appe ...

Guide on how to navigate through sub-sections within a larger section

I am in the process of developing a rails app where I would like to include a side div for displaying news updates in a vertical feed style. I have made some progress with the layout, but now I am facing issues with finding a suitable news-ticker plugin th ...

How to Use CSS to Copy a Style Path and Conceal an Element within an iFrame

My goal is to adjust a division by including a width element in its CSS properties. I have attempted to use Chrome and Firebug to copy the CSS path, but it seems that the result is incorrect. After inserting it into my style.css file, the division remains ...

The canvas map has an unseen boundary on the right, causing all other div sections to be

When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...

Failure to apply CSS to the class element instead of the div tag

Looking to update the CSS code below to change the color of a div to blue when it matches a specific class: I attempted the following changes, but they did not produce the desired result: &__header { display: flex; justify-content: space-betw ...

Subnav sticks when scrolling down but becomes unresponsive on resizing

My webpage has a main header that sticks to the top of the window and a subnav fixed at the bottom. The hero image adjusts its height based on the window minus the header and subnav heights. When scrolling past the subnav, it sticks just below the main nav ...

Exploring the capabilities of storing and retrieving nested objects within a React database

I'm having trouble retrieving nested items from my database. This is how my database is structured: GET /dwelling/room/ [ { "room_id": 1, "room_name": "Living Room", "room_data": [ { "id": 1, ...

Tips for incorporating right padding to three images while maintaining them all in the same row

Apologies for my lack of experience, as I am new to web development. I am currently facing a challenge where I need to add padding to the right of three images while still keeping them all in the same row. I have attempted placing each image in its own d ...

Optimal method for integrating Google Font in GWT application

After successfully installing the Roboto font on my machine, I proceeded to include it in my welcome.html file by adding the following code: <link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesh ...

Guide on redirecting to a different page and triggering a function with Angular's ng-click

One of my challenges involves toggling between different sections on a webpage using Angular functions onclick within home.php. Here is an example code snippet: <button class="btn btn-success btn-lg span6" ng-click="settingManage('setup-guide&apos ...

Chrome Table not behaving as expected when expanding div

I'm encountering an issue on my website where everything works perfectly in Firefox, IE, and Safari, but there is a glitch in Chrome. You can see the problem here: http://tinyurl.com/chxg2tb In Chrome, the table at the bottom extends beyond the cont ...

Highest Positioned jQuery Mobile Section

Requesting something a bit out of the ordinary, I understand. I currently have a jQueryMobile page set up with simplicity: <div data-role="page" class="type-home" id="home"> <div data-role="header" data-theme="b"> <h1>Our To ...

Is it advisable for me to make modifications to my Wordpress theme on my own?

After using the w3 validator to check the validity of my free WP theme from the WordPress marketplace, I found some warnings that I need to address. With a background in HTML and CSS, I noticed warnings such as "The header element does not need a role att ...

When CSS is applied, the canvas is stretched, whereas it remains normal when `width` and `height` attributes are used

I own two canvases, one is sized using HTML attributes width and height, while the other is sized using CSS: <canvas id="canvas1" width="300" height="300" onmousedown="canvasClick(this.id);"></canvas> < ...

Using pseudoclasses in combination with BEM: A beginner's guide

How can I effectively utilize pseudo-classes while adhering to the principles of BEM methodology? I'm facing a specific challenge with creating a custom checkbox functionality. Normally, I would use the input:checked + label selector. However, when t ...

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

Converting a data type into a CSS format

Currently, I am in the process of creating a table and would like to implement a 4-color scheme randomly selected from a pool of 10 schemes. Below is my CSS/PHP code: <?php header('Content-type: text/css'); // 0 grey $color00 = '#95 ...

Bolden the Text

Everything seems fine, but I'm looking to add more emphasis to this text .txt { font-weight: bolder; justify-content: left; text-align: left; margin-top: 100px; /* font-family: 'Redwinger Personal Use', system-ui, -ap ...

Looking to transform a list into JSON format using JavaScript?

I have a collection that looks like this: <ol class="BasketballPlayers"> <li id="1">Player: LeBron, TotalPoints: 28753, MVP: true</li> <li id="2">Player: Steph, TotalPoints: 17670, MVP: true< ...