CSS Border Radius Not Working in Android WebView or Chrome

Recently while working on mobile app project which was cross platform application we were creating pie shaped menu where we faced a very strange issue.

Actually I was trying to create following menu and I created that successfully while I was working in Xcode and iPhone simulator.

And it worked fine but as soon as I checked it in Android phone it came up like following.

Now that was so embarrassing. Off course, after spending couple of days to make such menu and it came up like this, that is so disappointing. How ever after spending some time over it I found out a solution, in this blog I am going to explain this. There more than one solutions so I posting each one. 

1) Some older version does not support percentage value. 

Some older version of chrome does not support percentage values for border radius. So instead of percentage give pixel values.

Use border-radius : 50px in stead of border-radius : 10%

2) Specify top, left right and bottom property separately. 

some Chrome does understand single value like border-radius : 50px. So here you have to specify each border radius saperately.

Use 
border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;

In stead of 

border-radius : 50px

3) Now here comes the issue which I have faced,  background-color "leaking" outside of a border when border-radius is present. In my case there were few div tags which was having background color and was going out side of main container because of transformation.  So here are the two solutions you can do.

Apply overflow: hidden property to main container

If that does not work apply following CSS property to main container.

-webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;

This should solve your all border radius related problem in all the versions of Chrome. Hope this helps you.

Solve Magento Error MySQL: Can't create/write to file '/tmp/#sql_3c6_0.MYI'

Recently one our client called me and said Magento Site is not working so I checked the site and found following error.

MySQL: Can't create/write to file '/tmp/#sql_3c6_0.MYI'

So what's the meaning of this error. At first it looks like a permission issue that tmp folder does not have necessary permissions. I checked through SSH and permission was ok. But still it's not working. 

Second issues could be tmp folder owner is not web root, hence it's not allowing to create files from web users. I checked that also and owner was correct. 

After few checks through SSH, I found out that it was actually an issue of Inodes on server. Disk was almost full and there were no enough space to create new files. So have to delete some files to create space. 

This you can do through SSH, but make sure you what are the files you are deleting and will that create any issues. If you don't know much about magento files and folders, PLEASE CONTACT YOUR HOSTING PROVIDER to delete it for you.

In my case I deleted old backups of database and deleted magento caches and sessions files from /var folder and then my site was up and working normally. 

Hope this helps you.

Laravel 5.x Dispaly Custom Error Page on Exception and Error

In this quick and small blog I am going to explain how to create custom error page for your Laravel 5.x project.

Laravel 5.x have custom exception handler class which you will find in app/Exceptions/Handler.php

If you open this file, you will see below code.

/**
* Render an exception into an HTTP response.
*
* @param  \Illuminate\Http\Request  $request
* @param  \Exception  $e
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $e)
{
return parent::render($request, $e);
}

This code renders exceptions on your HTTP response and your end users will actually see following pages.

That's really embarrassing for your end users as they don't understand what is this all about. So best practice is to hide this types of errors and show custom error page to users. For that add a error page view in your project and render it on exception. Modify above function as follow.

/**

     * Render an exception into an HTTP response.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  \Exception  $e

     * @return \Illuminate\Http\Response

     */

    public function render($request, Exception $e)

    {

        return response()->view('errors.index');

    } 

That's it and now you will have custom error page in your laravel app.